<template>
  <q-layout view="hHh lpR fFf" class="bg-grey-3">
    <div class="row justify-center q-py-lg">
      <div class="text-h5" style="margin-top:5%">{{ fx.packageInfo?.productName }}</div>
    </div>
    <div class="row justify-center q-mx-md">
      <div class="q-pa-md shadow-2 bg-white" style="width:400px">
        <router-view :key="fx.router.currentRoute.value.path" /> <!-- 这里增加一个key来避免不同path引用相同页面组件导致的跳转而不reload页面的问题 -->
      </div>
    </div>
    <div class="row justify-center q-py-lg">
      <div class="col-12 text-center">
        &copy; {{ fx.packageInfo?.copyrightYear }}
        {{ fx.packageInfo?.njtconfig.copyrightProprietor }}
      </div>
      <div class="col-12 text-center">
        <a :href="miitWebsite" target="blank">{{ fx.packageInfo?.njtconfig.miiReg }}</a>
      </div>
    </div>
  </q-layout>
</template>

<script lang="ts">
export default {
  name: 'centerBoxLayoutStd',

  setup() {
    const miitWebsite = 'https://beian.miit.gov.cn/'
    const fx = $f

    return {fx, miitWebsite}
  }
}
</script>
